<template>
  <view>
<!--    <view style="height: 30px;border-bottom: 2px solid #007aff;margin-bottom:4px;position: fixed;top:44px;background: #fff;z-index: 3;width:100%;line-height: 40px;">
      <text @click="updateCurrentIndex(index)" :class="{ active: index===currentIndex }" style="display: inline-block;margin-right:8px;" v-for="(item, index) in dataList">tabs{{index}}</text>
      <text>{{mixinName}}</text>
    </view>
    <swiper
        :autoplay="false"
        @change="changeSwiper"
        :current="currentIndex"
        :style="{ height: swiperHeight + 'px','margin-top':'60px' }"
    >
      <swiper-item v-for="(item, index) in dataList" :key="item.id">
        <view :id="'content-wrap' + index">
          每一个swiper-item的内容区域
          <view v-for="i in 30">{{i}}</view>
        </view>
      </swiper-item>
    </swiper>
    -->
  </view>
</template>

<script >
import uc02Swiper06Mixin from './uc03-swiper06'
export default {
  mixins:[uc02Swiper06Mixin],
  data() {
    return {
      //滑块的高度(单位px)
      swiperHeight: 0,
      //当前索引
      currentIndex: 0,
      //列表数据
      dataList: [],
    };
  },
  created() {
    for(let i=0;i<5;i++){
      this.dataList.push({id:i});
    }
  },
  onLoad(args) {
    //动态设置swiper的高度
    this.$nextTick(() => {
      this.setSwiperHeight();
    });
  },
  methods: {
    //手动切换题目
    changeSwiper(e) {
      this.currentIndex = e.detail.current;
      //动态设置swiper的高度，使用nextTick延时设置
      this.$nextTick(() => {
        this.setSwiperHeight();
      });
    },
    //动态设置swiper的高度
    setSwiperHeight() {
      let element = "#content-wrap" + this.currentIndex;
      let query = uni.createSelectorQuery().in(this);
      query.select(element).boundingClientRect();
      query.exec((res) => {
        if (res && res[0]) {
          this.swiperHeight = res[0].height;
        }
      });
    },
    updateCurrentIndex(index){
      this.currentIndex = index;
    }
  },
};
</script>

<style lang="scss">
.active{
  color: #007aff;
}
</style>
